<template>
    <div>
        <Tabcomponent></Tabcomponent>
        <div class="bag">
            <div>购物袋</div>
            <div>
                <div class="pitchon">
                    <i class="iconfont icon-gou"></i>
                </div>
                <span>全选</span>
                <ul>
                    <li>商品</li>
                    <li>单价</li>
                    <li>数量</li>
                    <li>编辑</li>
                </ul>
            </div>
            <!--商品-->
            <div class="bagitem" v-for="(item,index) in 5" :key="index">
                <div>GUCCI</div>
                <div>
                    <div class="pitchon">
                        <i class="iconfont icon-gou"></i>
                    </div>
                </div>
                <img src="../assets/img/V9CNS.png" alt="">
                <div>
                    <ul>
                        <li>
                            <div>MEDIHEAL</div>
                            <p>超级无敌小格包包</p>
                            <p>黑色    S</p>
                        </li>
                        <li>￥8000.00</li>
                        <li>
                            <el-input-number v-model="num" @change="handleChange" :min="1" :max="10" label="描述文字"></el-input-number>
                        </li>
                        <li>
                            <div>
                                <el-button type="text" @click="open">删除</el-button>
                            </div>
                            <div style="position: relative;">
                                <span @click="Modifycoupons(index)">修改优惠</span>
                                <div class="prefer" v-if="Modifyidex==index">
                                    <div>
                                        <div>
                                            <i></i>
                                        </div>
                                        <div>推荐好友200优惠券</div>
                                    </div>
                                    <div>
                                        <div>
                                            <i></i>
                                        </div>
                                        <div>不参与活动</div>
                                    </div>
                                    <div>
                                        <button>确定</button>
                                        <button style=" margin-left: 40px;">取消</button>
                                    </div>
                                    <span class="iconfont icon-xiangshang"></span>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <!--立即结算-->
            <div class="settlement">
                总计 : <span>￥160000.0</span>
                <button @click="toplaceanorder">去结算</button>
            </div>
           
        </div>
    </div>
</template>

<script>
import Tabcomponent from '@/components/Tabcomponent.vue'//导航
export default {
    components: {
        Tabcomponent
    },
    data() {
        return {
            num: 1,
            dialogVisible: false,
            Modifyidex: null
        }
    },
    methods: {
        handleChange(value) {
            console.log(value);
        },
        toplaceanorder() {
            this.$router.push({
                path: '/placeanorder'
            })
        },
        open() {
            this.$confirm('此操作将删除该商品, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).then(() => {
            this.$message({
                type: 'success',
                message: '删除成功!'
            });
            }).catch(() => {
            this.$message({
                type: 'info',
                message: '已取消删除'
            });          
            });
        },
        Modifycoupons(i) {//优惠券显示
            this.Modifyidex = i
        }
    },
}
</script>

<style lang='scss'>
.bag {
    width: 1102px;
    padding-top: 215px;
    >div:nth-child(1) {
        font-size: 36px;
    }
    >div:nth-child(2) {
       overflow: hidden;
       margin-top: 29px;
       padding-bottom: 18px;
       border-bottom: 1px solid #000;
       >span {
           font-size: 16px;
           float: left;
       }
       >ul {
           float: right;
           >li {
               float: left;
               width: 240px;
               text-align: center;
           }
       }
    }
    >.bagitem{
        padding-top: 18px;
        height: 193px;
        position: relative;
        >div:nth-child(1) {
            font-size: 20px;
            font-weight: 600;
        }
        >div:nth-child(2) {
            overflow: hidden;
            margin-top: 12px;
        }
        >img {
            width: 153px;
            height: 150px;
            position: absolute;
            top: 61px;
            left: 22px;
        }
        >div:nth-child(4) {
            // overflow: hidden;
            >ul {
                float: right;   
                // overflow: hidden;
                >li {
                    float: left;
                    width: 160px;
                    margin: 0 40px;
                    text-align: center;
                }
                >li:nth-child(1) {
                    >div {
                        font-size: 18px;
                    }
                    >p {
                        font-size: 14px;
                        color: #666;
                        margin-top: 2px;
                    }
                }
                >li:nth-child(2) {
                    font-size: 14px;
                }
                >li:nth-child(4) {
                    font-size: 14px;
                    >div {
                        cursor: pointer;
                    }
                    >div:nth-child(2) {
                        margin-top: 5px;
                        
                    }
                }
            }
        }
    }
    .settlement {
        height: 50px;
        background: #f5f5f5;
        margin-top: 33px;
        margin-bottom: 345px;
        font-size: 14px;
        line-height: 50px;
        padding-left: 16px;
        position: relative;
        >span {
            font-size: 16px;
            font-weight: 600;
        }
        >button {
            width: 239px;
            height: 50px;
            background: #000;
            color: #fff;
            font-size: 16px;
            position: absolute;
            right: 0;
            cursor: pointer;
            outline: none;
        }
    }
}
.pitchon {
    width: 18px;
    height: 18px;
    border: 1px solid #ccc;
    border-radius: 50%;
    position: relative;
    float: left;
    cursor: pointer;
    i {
        font-size: 21px;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -10.5px;
        margin-top: -11.5px;
    }
}
.prefer {
    width: 208px;
    height: 140px;
    background: #e5e5e5;
    padding: 10px;
    position: absolute;
    top: 30px;
    left: -40px;
    z-index: 22;
    >div {
        
        overflow: hidden;
        margin-bottom: 10px;
        >div:nth-child(1) {
            width: 20px;
            height: 20px;
            border: 1px solid #000;
            border-radius: 50%;
            position: relative;
            cursor: pointer;
            float: left;
            >i {
                display: inline-block;
                width: 14px;
                height: 14px;
                background: #000;
                border-radius: 50%;
                position: absolute;
                left: 50%;
                top: 50%;
                margin: -7px 0 0 -7px;
            }
        }
        >div:nth-child(2) {
            font-size: 14px;
            float: left;
            margin-left: 4px;
        }
        >button {
            width: 80px;
            height: 30px;
            background: #fff;
            border: 1px solid #BBBBBB;
            border-radius: 4px;
            font-size: 14px;
            margin-top: 51px;
            cursor: pointer;
            outline: none;
        }
        
    }
    >span {
        font-size: 30px;
        color: #e5e5e5;
        position: absolute;
        top: -22px;
        left: 50%;
        margin-left: -15px;
    }
}
.el-input-number__increase {
    border-radius: 0 0 0 0;
    border-left: 1px solid #000;
}
.el-input-number__decrease {
    border-radius: 0 0 0 0;
    border-right: 1px solid #000;
}
.el-input-number {
    width: 120px;
    line-height: 22px;
}
.el-input__inner {
    border: 1px solid #000;
    line-height: 24px;
    height: 24px;
    padding: 0 5px;
    width: 100%;
}
.el-input.is-active .el-input__inner, .el-input__inner:focus {
    border-color: #000;

}
.el-input-number .el-input__inner {
    -webkit-appearance: none;
    padding-left: 10px;
    padding-right: 10px; 
    text-align: center;
}
.el-input__inner {
    border-radius: 0;
}
.el-input-number__decrease, .el-input-number__increase {
    background: #fff;
}
.el-input-number__decrease:hover:not(.is-disabled)~.el-input .el-input__inner:not(.is-disabled), .el-input-number__increase:hover:not(.is-disabled)~.el-input .el-input__inner:not(.is-disabled) {
    border-color: #000;
}
.el-button--text {
    color: #101010;
}

.el-button--text:focus, .el-button--text:hover {
    color: #101010;
}
</style>